"Service card"
Bootstrap 4.1.1 Snippet by Mohsin Mukhtar

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- starting the team section --> <section class="my-5"> <div class="container"> <div class="row"> <div class="team-hire"> <p><span class="text-primary">//</span> Team</p> <h3>We’re always available <br><span class="text-primary">when you need us most.</span></h3> </div> <div class="owl-carousel owl-theme"> <div class="item text-center"> <div class="card-desc "> <a href="https://www.fiverr.com/mohsin_desginer"><img src="https://i0.wp.com/www.eatbgroup.com/web/wp-content/uploads/descarga.jpg?fit=1000%2C667&ssl=1" alt="" width="50"></a> <a href="https://www.fiverr.com/mohsin_desginer"> <h4 class="text-primary">Founder</h4> <p>Katherine Bregenzer</p> </a> </div> <div class="card-social-icon bg-primary"> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-facebook-f"></i></a> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-twitter"></i></a> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-behance"></i></a> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-linkedin"></i></a> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-youtube"></i></a> </div> </div> <div class="item text-center"> <div class="card-desc "> <a href="https://www.fiverr.com/mohsin_desginer"><img src="https://i0.wp.com/www.eatbgroup.com/web/wp-content/uploads/descarga.jpg?fit=1000%2C667&ssl=1" alt="" width="50"></a> <a href="https://www.fiverr.com/mohsin_desginer"> <h4 class="text-primary">CEO</h4> <p>Katherine Bregenzer</p> </a> </div> <div class="card-social-icon bg-primary"> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-facebook-f"></i></a> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-twitter"></i></a> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-behance"></i></a> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-linkedin"></i></a> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-youtube"></i></a> </div> </div> <div class="item text-center"> <div class="card-desc "> <a href="https://www.fiverr.com/mohsin_desginer"><img src="https://i0.wp.com/www.eatbgroup.com/web/wp-content/uploads/descarga.jpg?fit=1000%2C667&ssl=1" alt="" width="50"></a> <a href="https://www.fiverr.com/mohsin_desginer"> <h4 class="text-primary">Designer</h4> <p>Katherine Bregenzer</p> </a> </div> <div class="card-social-icon bg-primary"> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-facebook-f"></i></a> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-twitter"></i></a> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-behance"></i></a> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-linkedin"></i></a> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-youtube"></i></a> </div> </div> <div class="item text-center"> <div class="card-desc "> <a href="https://www.fiverr.com/mohsin_desginer"><img src="https://i0.wp.com/www.eatbgroup.com/web/wp-content/uploads/descarga.jpg?fit=1000%2C667&ssl=1" alt="" width="50"></a> <a href="https://www.fiverr.com/mohsin_desginer"> <h4 class="text-primary">Developer</h4> <p>Katherine Bregenzer</p> </a> </div> <div class="card-social-icon bg-primary"> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-facebook-f"></i></a> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-twitter"></i></a> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-behance"></i></a> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-linkedin"></i></a> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-youtube"></i></a> </div> </div> <div class="item text-center"> <div class="card-desc "> <a href="https://www.fiverr.com/mohsin_desginer"><img src="https://i0.wp.com/www.eatbgroup.com/web/wp-content/uploads/descarga.jpg?fit=1000%2C667&ssl=1" alt="" width="50"></a> <a href="https://www.fiverr.com/mohsin_desginer"> <h4 class="text-primary">Founder</h4> <p>Katherine Bregenzer</p> </a> </div> <div class="card-social-icon bg-primary"> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-facebook-f"></i></a> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-twitter"></i></a> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-behance"></i></a> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-linkedin"></i></a> <a href="https://www.fiverr.com/mohsin_desginer/convert-to-figma-psd-sketch-pdf-to-html-complete-responsive"><i class="fab fa-youtube"></i></a> </div> </div> </div> </div> </div> </section> <!-- ending the team section -->
/******team section*******/ .team-hire h3 { font-size: 50px; letter-spacing: -1px; line-height: 60px; color: #001d23; font-weight: 500; } /***** card services ******/ .item { margin: 50px 30px 20px 0px; } .item .card-desc { position: relative; padding-bottom: 1px; } .item .card-desc a { text-decoration: none; } .item .card-desc h4 { margin: 0; margin-top: 10px; font-size: 20px; font-weight: 700; } .item .card-desc p { font-size: 16px; letter-spacing: -1px; color: #001d23; font-weight: 500; } .item .card-desc img{ width: 300px !important; } .item .card-social-icon { display: none; position: absolute; bottom: 95px; left: 55px; } .item .card-social-icon a { text-decoration: none; color: #fff; } .item .card-social-icon a i { padding: 7px; } .item:hover .card-social-icon { display: block; -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .item:hover { -webkit-box-shadow: 0px 8px 8px rgba(0, 29, 35, 0.04); box-shadow: 0px 8px 8px rgba(0, 29, 35, 0.04); } .owl-carousel.owl-theme{ display: flex; }

Related: See More


Questions / Comments: